<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>

    <!--引入JQuery 注意在bootstrap.min.js之前引入，因为bootstrap基于jQuery-->
    <script type="text/javascript" th:src="@{/static/js/jquery-3.6.0.min.js}"></script>

    <!--引入bootstrap样式-->
    <link rel="stylesheet" th:href="@{/static/bootstrap-3.4.1-dist/css/bootstrap.min.css}">
    <script th:src="@{/static/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/axios.min.js}"></script>
    <script th:src="@{/static/js/vue.min.js}"></script>
    <style>
        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }
    </style>
</head>
<body>
<!--/*@thymesVar id="pageInfo" type="com.github.pagehelper.PageInfo"*/-->
<div id="app" class="container">
    <!--添加模态框-->
    <div class="modal fade" id="emp_add_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户添加</h4>
                </div>


                <div class="modal-body">

                    <form class="form-horizontal" id="emp_add_model_form">
                        <!--员工姓名-->
                        <div class="form-group">
                            <label for="empName_add_input" class="col-sm-2 control-label">用户名</label>
                            <div :class="{'col-sm-10':true,'has-error':empName_err,'has-success':!empName_err}">
                                <input type="text" name="empName" v-model="empName" @blur="check_name"
                                       class="form-control"
                                       id="empName_add_input"
                                       placeholder="请输入员工姓名">
                                <span class="help-block" v-show="empName_err">{{empName_err_info}}</span>
                                <span class="help-block" v-show="!empName_err">{{empName_success_info}}</span>
                                <!--                                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" v-show="empName_err"></span>-->
                                <!--                                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" v-show="!empName_err"></span>-->

                            </div>

                        </div>

                        <!--邮箱-->
                        <div class="form-group">
                            <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
                            <div :class="{'col-sm-10':true,'has-error':email_err,'has-success':!email_err}">
                                <input type="text" name="email" v-model="email" @blur="check_email(email)"
                                       class="form-control"
                                       id="email_add_input"
                                       placeholder="示例: email@123.com">
                                <span class="help-block" v-show="email_err">{{email_err_info}}</span>
                                <!--                                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" v-show="email_err"></span>-->
                                <!--                                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" v-show="!email_err"></span>-->
                            </div>
                        </div>

                        <!--性别-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender_add_input1" value="男"
                                           checked="checked"> 男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender_add_input2" value="女"> 女
                                </label>
                            </div>
                        </div>

                        <!--部门-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">
                                <label>
                                    <select class="form-control" name="dId">
                                        <option v-for="dept in depts" :value="dept.deptId">{{dept.deptName}}</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">取消</button>
                    <button type="button"
                            :class="{'btn':true,'btn-primary':true, 'disabled' : (email_err || empName_err || email == '' || empName == '')}"
                            @click="emp_save_btn">保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--修改模态框-->
    <div class="modal fade" id="emp_update_model" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">用户修改</h4>
                </div>


                <div class="modal-body">

                    <form class="form-horizontal" id="emp_update_model_form">
                        <!--用户姓名-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <p class="form-control-static">{{emp.empName}}</p>
                            </div>
                        </div>

                        <!--邮箱-->
                        <div class="form-group">
                            <label for="email_update_input" class="col-sm-2 control-label">邮箱</label>
                            <div :class="{'col-sm-10':true,'has-error':email_err,'has-success':!email_err}">
                                <input type="text" name="email" v-model="emp.email" @blur="check_email(emp.email) "
                                       class="form-control"
                                       id="email_update_input"
                                       placeholder="示例: email@123.com">
                                <span class="help-block" v-show="email_err">{{email_err_info}}</span>
                            </div>
                        </div>
                        <input type="text" style="display:none;"/>
                        <!--性别-->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender_update_input1" value="男"
                                           :checked="emp.gender=='男'">男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="gender" id="gender_update_input2" value="女"
                                           :checked="emp.gender=='女'"> 女
                                </label>
                            </div>
                        </div>

                        <!--部门-->
                        <div class="form-group">
                            <label for="emp_update_dept" class="col-sm-2 control-label">部门</label>
                            <div class="col-sm-4">
                                <select id="emp_update_dept" class="form-control" name="dId">
                                    <option v-for="dept in depts" :value="dept.deptId"
                                            :selected="emp.dId == dept.deptId">{{dept.deptName}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default " data-dismiss="modal">取消</button>
                    <button type="button" @click="emp_update_submit_btn"
                            :class="{'btn':true,'btn-primary':true, 'disabled' : (email_err || emp.email == '')}">修改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--标题-->
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>

    <!--按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8">
            <button @click="emp_add_btn" class="btn btn-primary">新增</button>
            <button class="btn btn-danger" @click="delete_checked_btn">删除</button>
        </div>
    </div>

    <!--表格-->
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" @click="check_all" id="check_all_item">
                    </th>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                <tr v-for="emp in pageInfo.list">
                    <td>
                        <input type="checkbox" @click="check_single" class="check_item">
                    </td>
                    <td>{{emp.empId}}</td>
                    <td>{{emp.empName}}</td>
                    <td>{{emp.gender}}</td>
                    <td>{{emp.email}}</td>
                    <td>{{emp.dept.deptName}}</td>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm"
                                @click="emp_update_btn(emp.empId)">
                            <span class="glyphicon glyphicon-pencil"></span>
                            编辑
                        </button>
                        <button type="button" class="btn btn-danger btn-sm"
                                @click="emp_delete_btn(emp.empId,emp.empName)">
                            <span class="glyphicon glyphicon-trash"></span>
                            删除
                        </button>
                    </td>
                </tr>
                </tbody>


            </table>
        </div>
    </div>

    <!--记录信息-->
    <div class="row">
        <div class="col-md-12 col-xs-12 text-right">
            第 <span>{{pageInfo.pageNum}}</span> 页, 共 <span>{{pageInfo.pages}}</span> 页, 共
            <span>{{pageInfo.total}}</span> 条记录
        </div>
    </div>

    <!--分页条信息-->
    <nav style="text-align: center;">
        <div class="row">
            <!--            <div class="col-md-9 col-xs-9 col-md-offset-2 col-xs-offset-2">-->
            <ul class="pagination">
                <li :class="{disabled : !pageInfo.hasPreviousPage}"><a
                        @click="num_page(1,pageInfo.hasPreviousPage)">首页</a></li>
                <li :class="{disabled : !pageInfo.hasPreviousPage}"><a
                        @click="num_page(pageInfo.pageNum - 1,pageInfo.hasPreviousPage)">&laquo;</a>
                </li>
                <li v-for="num in pageInfo.navigatepageNums" :class="{ active: pageInfo.pageNum == num}"><a
                        @click="num_page(num,true)">{{num}}</a></li>
                <li :class="{disabled : !pageInfo.hasNextPage}"><a
                        @click="num_page(pageInfo.pageNum + 1,pageInfo.hasNextPage)">&raquo;</a>
                </li>
                <li :class="{disabled : !pageInfo.hasNextPage}"><a
                        @click="num_page(pageInfo.pages,pageInfo.hasNextPage)">末页</a></li>
            </ul>
            <!--            </div>-->
        </div>
    </nav>


</div>


<script>
    // 页面通过axios请求，要到分页数据
    const app = new Vue({
        el: "#app",
        data: {
            pageInfo: "",
            depts: "",
            empName: "",
            email: "",
            empName_err: false,
            empName_err_info: "",
            email_err: false,
            empName_success_info: "",
            email_err_info: "",
            emp: "",
        },
        created: function () {
            axios({
                method: "get",
                url: "emp",
                params: {
                    pageNumber: "1"
                }
            }).then(res => {
                this.pageInfo = res.data.extend.pageInfo
                console.log(res.data.code)
            }).catch(err => {
                console.log(this.err)
            })
        },
        methods: {

            // 分页
            num_page: function (num, boolean) {
                $("#check_all_item").prop("checked", false)
                $(".check_item").prop("checked", false)
                if (boolean) {
                    axios({
                        method: "get",
                        url: "emp",
                        params: {
                            pageNumber: num
                        }
                    })
                        .then(res => {
                            this.pageInfo = res.data.extend.pageInfo
                            console.log(res.data.code)
                        })
                        .catch(err => {
                            console.log(this.err)
                        })
                }
            },

            // 打开添加模态框
            emp_add_btn: function () {
                this.empName_err = false
                this.email_err = false
                this.empName_success_info = ""
                this.empName = ""
                this.email = ""


                // 查询部门信息
                this.getDepts()
                $("#emp_add_model").modal("show")
            },

            // 打开修改模态框
            emp_update_btn: function (empId) {
                this.empName_err = false
                this.email_err = false
                axios({
                    url: "emp/" + empId,
                    method: "get",
                }).then(res => {
                    this.emp = res.data.extend.emp
                    console.log(res.data.code)
                }).catch(err => {
                    console.log(err)
                })

                // 查询部门信息
                this.getDepts()
                $("#emp_update_model").modal("show")
            },

            // 保存数据
            emp_save_btn: function () {
                // 校验数据
                if (this.empName === "" || this.email === "") {
                    if (this.empName === "") {
                        this.empName_err = true
                        this.empName_err_info = "用户名不能为空"
                    }
                    if (this.email === "") {
                        this.email_err = true
                        this.email_err_info = "邮箱不能为空"
                    }
                }

                if (this.email_err || this.empName_err) {
                    return false;
                }


                // 1.将模态框中的数据保存在数据库中
                axios({
                    method: "post",
                    url: "emp",
                    data: $("#emp_add_model form").serialize(),
                }).then(res => {
                    var data = res.data
                    if (data.code === 200) {
                        // 2.关闭模态框
                        $("#emp_add_model").modal("hide")
                        // 3.跳转末页
                        this.num_page(this.pageInfo.pages + 1, true)
                    } else {
                        console.log(data)

                        if (this.empName === "" || this.email === "") {
                            if (this.empName === "") {
                                this.empName_err = true
                                this.empName_err_info = "用户名不能为空"
                            }
                            if (this.email === "") {
                                this.email_err = true
                                this.email_err_info = "邮箱不能为空"
                            }
                        } else {
                            if (undefined !== data.extend.errFields.empName) {
                                this.empName_err = true
                                this.empName_err_info = data.extend.errFields.empName
                            } else if ("处理成功" !== data.msg && "处理失败" !== data.msg) {
                                this.empName_err = true
                                this.empName_err_info = data.msg
                            }
                            if (undefined !== data.extend.errFields.email) {
                                this.email_err = true
                                this.email_err_info = data.extend.errFields.email
                            }
                        }


                    }

                }).catch(err => {
                    console.log(err)
                })

            },

            // 离开输入框查看用户名是否符合要求
            check_name: function () {
                var regName = /(^[a-z0-9_-]{3,16})|(^[\u2E80-\u9FFF]{2,5})$/;
                if (!regName.test(this.empName)) {
                    this.empName_err_info = "用户名可以是2-5位中文或3-16英文和数字组合"
                    this.empName_err = true
                } else {
                    axios({
                        method: "get",
                        url: "checkUser",
                        params: {
                            empName: this.empName
                        }
                    }).then((res) => {
                        var data = res.data;
                        if (data.code === 400) {
                            this.empName_err_info = data.msg
                            this.empName_err = true

                        } else {
                            this.empName_success_info = data.msg
                            this.empName_err = false
                        }
                        console.log(data.code)
                    }).catch(err => {
                        console.log(err)
                    })


                }
            },

            // 离开输入框查看邮箱是否符合要求
            check_email: function (email) {
                var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                this.email_err_info = "邮箱格式不正确"
                this.email_err = !regEmail.test(email)
            },

            //获取部门信息
            getDepts: function () {
                axios({
                    method: "get",
                    url: "dept",
                }).then(res => {
                    var data = res.data
                    this.depts = data.extend.depts
                    console.log(data.code)
                    console.log(data.msg)
                }).catch(err => {
                    console.log(err)
                })
            },

            //提交修改数据
            emp_update_submit_btn: function () {
                if (this.emp.email === "") {
                    this.email_err = true
                    this.email_err_info = "邮箱不能为空"
                    return false
                }

                if (this.email_err) {
                    return false;
                }

                axios({
                    method: "put",
                    url: "emp/" + this.emp.empId,
                    data: $("#emp_update_model form").serialize(),
                }).then(res => {
                    var data = res.data
                    if (data.code === 200) {
                        // 2.关闭模态框
                        $("#emp_update_model").modal("hide")
                        // 3.重新加载数据
                        this.num_page(this.pageInfo.pageNum, true)
                    } else {
                        if (undefined !== data.extend.errFields.empName) {
                            this.empName_err = true
                            this.empName_err_info = data.extend.errFields.empName
                        } else if ("处理成功" !== data.msg && "处理失败" !== data.msg) {
                            this.empName_err = true
                            this.empName_err_info = data.msg
                        }
                        if (undefined !== data.extend.errFields.email) {
                            this.email_err = true
                            this.email_err_info = data.extend.errFields.email
                        }
                    }
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })
            },

            //通过id删除员工
            emp_delete_btn: function (empId, empName) {
                if (confirm("确认删除【" + empName + "】吗？")) {
                    axios({
                        method: "delete",
                        url: "emp/" + empId
                    }).then(res => {
                        this.num_page(this.pageInfo.pageNum, true)
                        console.log(res.data.code)
                    })
                }
            },

            //复选框全选
            check_all: function () {
                $(".check_item").prop("checked", $("#check_all_item").prop("checked"))
            },

            //选择单个
            check_single: function () {
                if ($(".check_item:checked").length === this.pageInfo.size) {
                    $("#check_all_item").prop("checked", true)
                } else {
                    $("#check_all_item").prop("checked", false)
                }
            },

            //删除所有选中的成员
            delete_checked_btn: function () {
                var length = $(".check_item:checked").length;
                if (length === 0) {
                    alert("请选择要删除的成员")
                    return
                }
                var empNames = ""
                var ids = ""
                $.each($(".check_item:checked"), function () {
                    empNames += $(this).parents("tr").find("td:eq(2)").text() + ","
                    ids += $(this).parents("tr").find("td:eq(1)").text() + ","
                })
                empNames = empNames.substring(0, empNames.length - 1);
                ids = ids.substring(0, ids.length - 1);
                if (confirm("确认删除【" + empNames + "】吗？")) {
                    axios({
                        method: "delete",
                        url: "emp/" + ids
                    }).then(res => {
                        this.num_page(this.pageInfo.pageNum, true)
                        console.log(res.data.code)
                    })
                }
            }
        }
    })

</script>
</body>
</html>